<script lang="ts">
  import { onMount } from 'svelte';
  import { Link } from 'svelte-routing';
  import { writable } from 'svelte/store';
  import { get } from '../../utils/api';
  import { addToast } from '../../stores/toastStore';
  import Header from '../../components/garage/Header.svelte';

  let loading = true; // 加载中
  let vehicle = {
    // 用户字段
    plate_number: '鄂AFG2129', // 车牌号
    chassis_number: 'LBGHG52H5F1234567', // 车架号
    type: 1, // 车辆类型
    model: 'SUV', // 车型
    key_present: 1, // 是否有钥匙
    registration_present: 1, // 是否有行驶证
    door: 1, // 是否有门
    items: 1, // 是否有物品
    damage: 0, // 是否有损伤
    seal: 0, // 是否有封条
    other: {
        photos: 29,
        exceptions: 2,
    },
    garage: {
        "name": "太原库",
        "price": 30,
    },
    warehouse_entry: {
        "entry_at": "2024-09-23 12:00:00",
    },
    tasks: {
        key_deliveries: 1,
        vehicle_repairs: 0,
        key_duplications: 0,
        items_back: 0,
    }
  }
  async function showVehicles() {
    const query = new URLSearchParams(window.location.search);
    let id = query.get('id') || '0';

    try {
      const response = await get('/vehicles/'+id);
      vehicle = response.data;
    } catch (error) {
      addToast('仓库数据加载失败'+error, 'error', 3000);
    }
  }

  onMount(() => {
    try {
      showVehicles();
    } catch (err) {
    } finally {
      loading = false;
    }
  });
</script>

<main>
    <Header title="车辆详情"/>
    <div class="p-4">
        <div class="bg-blue-500 text-white p-4 rounded-md mb-4">
            <div>{vehicle.plate_number}</div>
            <div>{vehicle.chassis_number}</div>
            <div>{vehicle.model}</div>
            <div class="flex justify-between mt-2 border-t border-blue-300 pt-2" style="text-align: center;">
                <span>{vehicle.key_present === 1 ? '有' : '无'}<br>钥匙</span>
                <span>{vehicle.door === 1 ? '有' : '无'}<br>车门</span>
                <span>{vehicle.registration_present === 1 ? '有' : '无'}<br>行驶证</span>
                <span>{vehicle.items === 1 ? '有' : '无'}<br>物品</span>
                <span>{vehicle.damage === 1 ? '有' : '无'}<br>损伤</span>
                <span>{vehicle.seal === 1 ? '有' : '无'}<br>封条</span>
            </div>
        </div>
        <div class="mb-4">
            <p>停放庫房：{vehicle.garage.name}</p>
            <p>入庫時間：{vehicle.warehouse_entry.entry_at}</p>
            <p>收費標準：{vehicle.garage.price}元/天</p>
        </div>
        <div class="grid grid-cols-2 gap-2 mb-4">
            <div class="bg-gray-100 p-4 text-center rounded-md">
                <div>入庫照片</div>
                <div class="text-xl font-bold">{vehicle.other.photos}</div>
            </div>
            <div class="bg-gray-100 p-4 text-center rounded-md">
                <div>異常記錄</div>
                <div class="text-xl font-bold">{vehicle.other.exceptions}</div>
            </div>
        </div>
        <div class="grid grid-cols-4 gap-2 mb-4">
            <div class="bg-gray-100 p-2 text-center rounded-md">
                <div>寄钥匙</div>
                <div class="text-xl font-bold">{vehicle.tasks.key_deliveries}</div>
            </div>
            <div class="bg-gray-100 p-2 text-center rounded-md">
                <div>维修</div>
                <div class="text-xl font-bold">{vehicle.tasks.vehicle_repairs}</div>
            </div>
            <div class="bg-gray-100 p-2 text-center rounded-md">
                <div>配钥匙</div>
                <div class="text-xl font-bold">{vehicle.tasks.key_duplications}</div>
            </div>
            <div class="bg-gray-100 p-2 text-center rounded-md">
                <div>物品回寄</div>
                <div class="text-xl font-bold">{vehicle.tasks.items_back}</div>
            </div>
        </div>
        <Link to="/warehouse-exits" class="w-full bg-blue-500 text-white text-center py-2 rounded-md" style="display: block;">出庫報告</Link>
    </div>
</main>

<style lang="scss">
</style>
